import QtQuick 1.0
import "Components" as Gears

Item {
	id: container
	width: 800
	height: 600

	BorderImage {
		id: background
		source: "images/Main.png"

		border.left: 2; border.top: 10
		border.right: 2; border.bottom: 10

		anchors.fill: clipView

		smooth: true
	}

	Gears.ClipView {
		id: clipView
		anchors.verticalCenter: parent.verticalCenter
		width: 500
	}

	Gears.PreviewArea {
		id: preview
		anchors {
			left: clipView.right
			verticalCenter: clipView.verticalCenter
		}

		states: [
			State {
				name: "DoubleState"; when: mouseArea.pressed
				PropertyChanges {
					target: preview
					width: 280
					height: 280
				}
			}
		]

		transitions: [
			Transition {
				from: ""; to: "DoubleState"
				reversible: true
				NumberAnimation {
					target: preview
					properties: "width,height"
					duration: 200
				}
			}
		]

		MouseArea {
			id: mouseArea
			anchors.fill: parent
		}
	}
}
